<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 22px Times New Roman';

    // --- Define Geometry ---
    const origin = { x: 80, y: 320 };
    const wallHeight = 300;
    const floorWidth = 320;
    const hatchLength = 12;
    const hatchSpacing = 15;

    // Rod endpoints
    const A = { x: origin.x, y: 80 };
    const B = { x: origin.x + 280, y: origin.y };

    // Midpoint of the rod
    const C = { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2 };
    const massRadius = 6;

    // --- Drawing Functions ---

    function drawWall() {
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(origin.x, origin.y - wallHeight);
        ctx.stroke();

        // Draw hatching
        for (let y = origin.y; y > origin.y - wallHeight; y -= hatchSpacing) {
            ctx.moveTo(origin.x, y);
            ctx.lineTo(origin.x - hatchLength, y - hatchLength);
        }
        ctx.stroke();
    }

    function drawFloor() {
        ctx.beginPath();
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(origin.x + floorWidth, origin.y);
        ctx.stroke();

        // Draw hatching
        for (let x = origin.x; x < origin.x + floorWidth; x += hatchSpacing) {
            ctx.moveTo(x, origin.y);
            ctx.lineTo(x - hatchLength, origin.y + hatchLength);
        }
        ctx.stroke();
    }

    function drawRodAndMass() {
        // Draw the rod AB
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(B.x, B.y);
        ctx.stroke();

        // Draw the mass at C
        ctx.beginPath();
        ctx.arc(C.x, C.y, massRadius, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Labels for points
        ctx.fillText('A', A.x - 25, A.y + 5);
        ctx.fillText('B', B.x, B.y - 25);
        ctx.fillText('C', C.x - 25, C.y + 5);
        ctx.fillText('O', origin.x - 20, origin.y + 15);

        // Label for mass
        ctx.fillText('m', C.x + 10, C.y - 18);

        // Labels for length 'r'
        // Position them above the rod segments
        const midAC = { x: (A.x + C.x) / 2, y: (A.y + C.y) / 2 };
        const midCB = { x: (C.x + B.x) / 2, y: (C.y + B.y) / 2 };
        ctx.fillText('r', midAC.x + 15, midAC.y - 20);
        ctx.fillText('r', midCB.x + 15, midCB.y - 20);
    }

    function drawCaption() {
        ctx.font = '24px "SimSun", "Songti SC"'; // Use common Chinese fonts
        ctx.textAlign = 'center';
        ctx.fillText('力图 3.7.1', canvas.width / 2, 370);
    }

    // --- Execute Drawing ---
    drawWall();
    drawFloor();
    drawRodAndMass();
    drawLabels();
    drawCaption();

</script>
</body>
</html>